<template>
  <view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
    <!-- 导航栏内容区 -->
    <view class="navbar-content">
      <!-- 返回按钮 -->
      <view v-if="showBack" class="back-btn" @click="goBack">
        <text class="back-icon">←</text>
      </view>
      
      <!-- 标题 -->
      <text class="title" :style="{ paddingLeft: showBack ? '60rpx' : '0rpx' }">{{ title }}</text>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const props = defineProps({
  title: {
    type: String,
    default: '日程管理'
  },
  showBack: {
    type: Boolean,
    default: false
  }
});

// 状态栏高度
const statusBarHeight = ref(0);

// 获取系统信息设置状态栏高度
onMounted(() => {
  try {
    // 使用新的API获取窗口信息
    // #ifdef MP-WEIXIN
    const windowInfo = uni.getWindowInfo();
    statusBarHeight.value = windowInfo.statusBarHeight || 0;
    // #endif
    
    // #ifndef MP-WEIXIN
    const sysInfo = uni.getSystemInfoSync();
    statusBarHeight.value = sysInfo.statusBarHeight || 0;
    // #endif
  } catch (e) {
    console.error('获取系统信息失败', e);
    // 设置默认值
    statusBarHeight.value = 20;
  }
});

// 返回上一页
const goBack = () => {
  uni.navigateBack({
    delta: 1,
    fail: () => {
      uni.switchTab({
        url: '/pages/index/index'
      });
    }
  });
};
</script>

<style>
.custom-navbar {
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99;
}

.navbar-content {
  display: flex;
  align-items: center;
  height: 90rpx;
  padding: 0 40rpx;
  position: relative;
}

.back-btn {
  position: absolute;
  left: 30rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-icon {
  font-size: 40rpx;
  font-weight: bold;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  flex: 1;
  text-align: left;
}
</style> 